<script setup>
import { computed } from "vue";
import "@material/web/elevation/elevation.js";

const props = defineProps(["type"]);
const type = computed(() => (props.type || "outlined"));
</script>

<template>
  <div :class="'card card-' + type">
    <md-elevation></md-elevation>
    <slot></slot>
  </div>
</template>

<style scoped>
.card {
  padding: 16px;
  border-radius: 12px;
  position: relative;
}

.card-outlined {
  border: solid var(--md-sys-color-outline-variant) 1px;
}

.card-elevated {
  --md-elevation-level: 2;
}

.card-filled {
  background-color: var(--md-sys-color-surface-container-highest);
}

.card-primary {
  background-color: var(--md-sys-color-primary-container);
}

.card-secondary {
  background-color: var(--md-sys-color-secondary-container);
}
</style>
